<template>
    <div :class="['yorha-switch', (isClick?'active':'')]" @click="disabled?'':clickHandler()">
        <div :class="['inner', (disabled?'disabled':'')]"></div>
    </div>
</template>

<script>
export default {
    name: "YorhaSwitch"
}
</script>

<script setup>
import {ref} from "vue";
let emits = defineEmits(['update:checked'])
let props = defineProps({
    checked:{
        type:Boolean,
        default:false
    },
    disabled: {
        type:Boolean,
        default:false
    }
})
let isClick = ref(false)

function clickHandler() {
    isClick.value = !isClick.value
    emits('update:checked', isClick.value)
}
</script>

<style lang="less" scoped>
@import "../../style";

.yorha-switch {
    display: inline-block;
    width: 50px;
    height: 30px;
    background: @darkYellow;
    box-sizing: border-box;
    border: 5px solid @gray;
    position: relative;
    transition: all 300ms ease-in-out;
    &.active {
        background: @green;

        & > .inner {
            left: 20px;
        }
    }

    & > .inner {
        position: absolute;
        margin: 1px;
        width: 18px;
        height: 18px;
        background: @gray;
        cursor: pointer;
        border-radius: 3px;
        left: 0;
        transition: all 300ms ease-in-out;
        &.disabled {
            cursor: not-allowed;
        }
    }
}
</style>